<template>
	<div class="bigBox">
		<div>
			<el-row>
				<el-col :span="24">
					<div class="topBox">
						<div class="iconBox">
							<div class="quanBox">
								<img src="../../../assets/img/price.png" style="width: 80px;height: 80px;">
							</div>
							<div class="iconWord">
								<div style="font-weight: bold;color: #05b1a9;">资产价格</div>
								<div style="font-size: 30px;font-weight: bold;margin-top: 5px;">12345</div>
							</div>
						</div>
						<div class="iconBox">
							<div class="quanBox2">
								<img src="../../../assets/img/number.png" style="width: 70px;height: 70px;">
							</div>
							<div class="iconWord">
								<div style="font-weight: bold;color: #11b7fa;">资产数量</div>
								<div style="font-size: 30px;font-weight: bold;margin-top: 5px;">12345</div>
							</div>
						</div>
						<div class="iconBox">
							<div class="quanBox3">
								<img src="../../../assets/img/price.png" style="width: 70px;height: 70px;">
							</div>
							<div class="iconWord">
								<div style="font-weight: bold;color: #f6a931;">正常使用数量</div>
								<div style="font-size: 30px;font-weight: bold;margin-top: 5px;">12345</div>
							</div>
						</div>
						<div class="iconBox">
							<div class="quanBox4">
								<img src="../../../assets/img/price.png" style="width: 70px;height: 70px;">
							</div>
							<div class="iconWord">
								<div style="font-weight: bold;color: #7c77ef;"></div>
								<div style="font-size: 30px;font-weight: bold;margin-top: 5px;">12345</div>
							</div>
						</div>
					</div>
				</el-col>
			</el-row>
		</div>
		<div class="conBox">
			<el-row :gutter="20">
				<el-col :span="8">
					<div class="contentBox">
						<div class="titleBox">
							<div class="titleColor"></div>
							<div style="font-weight: bold;margin-left: 10px;">资产排名</div>
						</div>
						<div class="chartBox" ref="myEcharts">

						</div>
					</div>
				</el-col>
				<el-col :span="8">
					<div class="contentBox">

					</div>
				</el-col>
				<el-col :span="8">
					<div class="contentBox">
						<div class="titleBox">
							<div class="titleColor"></div>
							<div style="font-weight: bold;margin-left: 10px;">状态占比</div>
						</div>
						<div class="chartBox1" ref="myEcharts1">
						</div>
					</div>
				</el-col>
			</el-row>
		</div>
		<div class="botBox">
			<el-row :gutter="20">
				<el-col :span="16">
					<div class="contentBox">
						<div class="titleBox1">
							<div class="titleColor"></div>
							<div style="font-weight: bold;margin-left: 10px;">资产排名</div>
						</div>
						<div class="chartBox2" ref="myEcharts2">

						</div>
					</div>
				</el-col>
				<el-col :span="8">
					<div class="contentBox">
						<div class="titleBox">
							<div class="titleColor"></div>
							<div style="font-weight: bold;margin-left: 10px;">资产排名</div>
						</div>
						<div class="chartBox">
							<template>
								<el-table :data="tableData" height="250" border style="width: 100%">
									<el-table-column prop="date" label="日期">
									</el-table-column>
									<el-table-column prop="name" label="姓名">
									</el-table-column>
									<el-table-column prop="address" label="地址">
									</el-table-column>
									<el-table-column prop="address" label="地址">
									</el-table-column>
								</el-table>
							</template>
						</div>
					</div>
				</el-col>
			</el-row>
		</div>
	</div>
</template>

<script>
	import {
		getJavaServerData,
		postJavaServerData
	} from "@/api/index.js";
	export default {
		data() {
			return {
				tableData: [{
					date: '2016-05-02',
					name: '王小虎',
					address: '上海市普陀区金沙江路 1518 弄'
				}, {
					date: '2016-05-04',
					name: '王小虎',
					address: '上海市普陀区金沙江路 1517 弄'
				}, {
					date: '2016-05-01',
					name: '王小虎',
					address: '上海市普陀区金沙江路 1519 弄'
				}, {
					date: '2016-05-03',
					name: '王小虎',
					address: '上海市普陀区金沙江路 1516 弄'
				}]
			}
		},
		created() {

		},
		mounted() {
			this.createCharts()
			this.createCharts1()
			this.createCharts2()
			window.addEventListener('resize', this.resizeChart);
		},
		beforeDestroy() {
			// 组件销毁时移除事件监听
			window.removeEventListener('resize', this.resizeChart);
		},
		methods: {
			resizeChart() {
				if (this.myChart) {
					// 调用echarts的resize方法实现自适应
					this.myChart.resize();
				}
			},
			createCharts() {
				this.myChart = this.$echarts.init(this.$refs.myEcharts);
				const option = {
					tooltip: {
						trigger: 'axis',
						axisPointer: {
							type: 'shadow'
						}
					},
					grid: {
						left: '1%',
						right: '1%',
						bottom: '10%',
						containLabel: true,
						top: '1%',
					},
					xAxis: {
						type: 'value',
						boundaryGap: [0, 0.01]
					},
					yAxis: {
						type: 'category',
						data: ['总部', '分部', '税局', '民政', '人设', '银行']
					},
					series: [{
						name: '资产金额',
						type: 'bar',
						data: [182, 234, 290, 357, 467, 630],
						itemStyle: {
							normal: {
								color: this.$echarts.graphic.LinearGradient(
									0, 0, 1, 0,
									[{
											offset: 0,
											color: '#07b1ad'
										},
										{
											offset: 1,
											color: '#8befe3'
										},
									]
								),
							},
						},
					}, ]
				};
				// 使用刚指定的配置项和数据显示图表。
				this.myChart.setOption(option, true);
				this.resizeChart();
			},
			createCharts1() {
				this.myChart = this.$echarts.init(this.$refs.myEcharts1);
				const option = {
					legend: {
						top: 'bottom'
					},
					tooltip: {
						trigger: 'item'
					},
					series: [{
						name: '资产状态占比',
						type: 'pie',
						radius: [15, 100],
						center: ['50%', '50%'],
						roseType: 'area',
						itemStyle: {
							borderRadius: 8
						},
						data: [{
								value: 40,
								name: '正常'
							},
							{
								value: 38,
								name: '损坏'
							},
							{
								value: 32,
								name: '逾期'
							},
							{
								value: 28,
								name: '失效'
							},
						],
						grid: {
							top: '1%', // 调整 grid 的 top 属性来控制图表位置
						},
					}]
				};
				// 使用刚指定的配置项和数据显示图表。
				this.myChart.setOption(option, true);
				this.resizeChart();
			},
			createCharts2() {
				this.myChart = this.$echarts.init(this.$refs.myEcharts2);
				const option = {
					// title: {
					// 	text: 'Stacked Area Chart'
					// },
					tooltip: {
						trigger: 'axis',
						axisPointer: {
							type: 'cross',
							label: {
								backgroundColor: '#6a7985'
							}
						}
					},
					// legend: {
					// 	data: ['Email']
					// },
					grid: {
						left: '3%',
						right: '4%',
						bottom: '3%',
						top: '3%',
						containLabel: true
					},
					xAxis: [{
						type: 'category',
						boundaryGap: false,
						data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
					}],
					yAxis: [{
						type: 'value'
					}],
					series: [{
							name: 'Email',
							type: 'line',
							stack: 'Total',
							areaStyle: {},
							emphasis: {
								focus: 'series'
							},
							data: [120, 132, 101, 134, 90, 230, 210],
							smooth: true,
							itemStyle: {
								normal: {
									color: this.$echarts.graphic.LinearGradient(
										0, 0, 0, 1,
										[{
												offset: 0,
												color: '#07b1ad'
											},
											{
												offset: 1,
												color: '#d5fffb'
											},
										]
									),
								},
							},
						},

					]
				};
				// 使用刚指定的配置项和数据显示图表。
				this.myChart.setOption(option, true);
				this.resizeChart();
			},
		}
	}
</script>

<style scoped>
	.topBox {
		width: 100%;
		height: 160px;
		background-color: white;
		box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
		display: flex;
		flex-direction: row;
	}
	
	::v-deep .el-table__body-wrapper {
		&::-webkit-scrollbar {
		 width: 8px;
		 background-color: #F5F5F5;
		}
		/* 设置滚动条轨道的样式 */
		&::-webkit-scrollbar-track {
		 border-radius: 10px;
		}
		/* 设置滚动条滑块的样式 */
		&::-webkit-scrollbar-thumb {
		 background-color:#07b1ad;
		 border-radius: 10px;
		}
	}

	.titleColor {
		width: 5px;
		height: 20px;
		background-color: #00b3ac;
	}

	.chartBox {
		width: 90%;
		height: 270px;
		margin: 0 auto;
	}

	.chartBox1 {
		width: 90%;
		height: 250px;
		margin: 0 auto;
	}

	.chartBox2 {
		width: 96%;
		height: 250px;
		margin: 0 auto;
	}

	.iconWord {
		margin-left: 10px;
		display: flex;
		flex-direction: column;
		justify-content: center;

	}

	.titleBox1 {
		height: 50px;
		width: 96%;
		margin: 0 auto;
		display: flex;
		flex-direction: row;
		align-items: center;
	}

	.titleBox {
		height: 50px;
		width: 92%;
		margin: 0 auto;
		display: flex;
		flex-direction: row;
		align-items: center;
	}

	.iconBox {
		width: 25%;
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
	}

	.quanBox {
		width: 120px;
		height: 120px;
		background: linear-gradient(to bottom, #91eee4, #05b1a9);
		border-radius: 50%;
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
	}

	.quanBox2 {

		width: 120px;
		height: 120px;
		background: linear-gradient(to bottom, #8adcfb, #11b7fa);
		border-radius: 50%;
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
	}

	.quanBox3 {
		width: 120px;
		height: 120px;
		background: linear-gradient(to bottom, #fdcf9d, #f6a931);
		border-radius: 50%;
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
	}

	.quanBox4 {
		width: 120px;
		height: 120px;
		background: linear-gradient(to bottom, #8b9af1, #7c77ef);
		border-radius: 50%;
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
	}

	.bigBox {
		width: 100%;
		height: 830px;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}

	.conBox {
		width: 100%;

		box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
	}

	.contentBox {
		width: 100%;
		height: 320px;
		background-color: white;
	}

	.botBox {
		width: 100%;
		height: 320px;
		box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
	}
</style>
